import React, {useState, useEffect, useRef} from 'react';
import {useNavigate, useLocation, Outlet} from "react-router-dom"
import logo from '@/assets/xiaomi_logo.png'
import './index.scss'
import useMessage from '@/hooks/getMessages.js'
import {
    DesktopOutlined,
    GiftOutlined,
    TeamOutlined,
    HomeOutlined,
    OpenAIOutlined,
    ShoppingCartOutlined,
    CloudOutlined,
    BellOutlined
} from '@ant-design/icons';
import {Layout, Menu, theme, Avatar, Button, Popconfirm, message, Popover, Badge, List} from 'antd';
import useWeather from "@/hooks/getWeather.js";

const {Header, Content, Sider} = Layout;

function getItem(label, key, icon, children) {
    return {
        label, key, icon, children
    };
}

const items = [getItem('首页', '/', <HomeOutlined/>), getItem('商品信息', 'sub0',
    <GiftOutlined/>, [getItem('轮播图管理', '/commodity/swiper'), getItem('新增热门商品', '/commodity/hot')]), getItem('用户管理模块', 'sub1',
    <TeamOutlined/>, [getItem('统计数据', '/user/census'), getItem('管理用户', '/user/management')]), getItem('购物管理模块', 'sub2',
    <ShoppingCartOutlined/>, [getItem('分类管理', '/shopping/breakdown'), getItem('订单管理', '/shopping/order'), getItem('优惠券管理', '/shopping/coupon')]), getItem('管理员模块', 'sub3',
    <OpenAIOutlined/>, [getItem('管理员信息', '/admin/information'), getItem('权限管理', '/admin/management')]), getItem('系统管理', 'sub4',
    <DesktopOutlined/>, [getItem('关于我们', '/system/about'), getItem('设置', '/system/set'), getItem('个人中心', '/system/me'), getItem('开发日志', '/system/log'), getItem('', '')])];

function Home() {
    // 获取天气信息
    const {WeatherList} = useWeather()
    // 天气组件
    const content = (
        <div style={{width: 280, height: 140, position: "relative"}}>
            <img
                src={`http://127.0.0.1:3031/weather/yintian.png`}
                style={{width: '100%', height: '100%', borderRadius: 10, opacity: 0.8}} alt=""/>

            <div style={{
                width: 280,
                position: 'absolute',
                top: 10,
                right: 0,
                fontSize: 15,
                fontWeight: 'bold',
                color: '#fff',
                display: 'flex',
                justifyContent: 'space-evenly',
            }}>
                <div>
                    <p>地区：{WeatherList.address}</p>
                    <p>天气：{WeatherList.weather}</p>
                    <p>温度：{WeatherList.temp}</p>
                </div>
                <div>
                    <p>风级：{WeatherList.windPower}</p>
                    <p>湿度：{WeatherList.humidity}</p>
                </div>
            </div>
        </div>
    )
    // 消息中心组件数据
    const {messageList} = useMessage()
    // 消息中心组件
    const messageItems = (
        <div style={{width: 200, maxHeight: 500, overflow: 'auto'}}>
            <List
                size="small"
                dataSource={messageList}
                renderItem={(item, index) => <List.Item>
                    <div style={{fontSize: 10}} className={'space'}>
                        <b style={{fontSize: 14, color: '#23abf2'}}> {index + 1}. </b> {item.content}
                    </div>
                </List.Item>}
            />
        </div>
    )
    // 侧边栏打开关闭
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: {colorBgContainer},
    } = theme.useToken();

    const pRef = useRef()
    const onCollapsed = (value) => {
        setCollapsed(value)
        if (pRef) {
            if (collapsed) {
                pRef.current.innerHTML = '小米商城'
            } else {
                pRef.current.innerHTML = ''

            }
        }
    }
    // 路由跳转
    const navigate = useNavigate();

    // 一加载页面就获取当前路由
    const {pathname} = useLocation();
    const [current, setCurrent] = useState(pathname);
    const [avatar, setAvatar] = useState({})

    useEffect(() => {
        setCurrent(pathname)
        const data = JSON.parse(localStorage.getItem("admin"))
        setAvatar(data)
    }, [pathname])

    // 点击侧边栏
    const onMenuClick = (e) => {
        navigate(e.key);
        // location.reload()
        if (e.key === '/system/me') {
            location.reload()
        }
    };

    // 点击安全退出
    const confirm = () => {
        navigate('/login')
        localStorage.removeItem("admin")
        message.success('退出成功')
    }

    return (<Layout
            style={{
                minHeight: '100vh',
            }}
        >
            <Sider collapsible collapsed={collapsed} onCollapse={onCollapsed}
                   style={{height: '100vh', overflow: 'auto'}}>
                <div className="demo-logo-vertical"
                     style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
                    <div style={{flex: '0.8', textAlign: 'center'}}>
                        < Avatar style={{width: '50px', height: '50px', margin: '0 10px'}}
                                 src={logo}/>
                    </div>
                    <p style={{fontSize: '20px', color: 'white', flex: '1.2'}} ref={pRef}> 小米商城
                    < /p>
                </div>

                <div>
                    <Menu theme="dark" defaultSelectedKeys={[current]} defaultOpenKeys={['sub1', 'sub4']}
                          mode="inline"
                          items={items}
                          onClick={onMenuClick}
                          inlineCollapsed={false}/>
                </div>
            </Sider>
            <Layout className="site_layout">
                <Header
                    style={{
                        padding: 0,
                        background: colorBgContainer,
                        display: 'flex',
                        justifyContent: 'end',
                        alignItems: 'center',
                        position: 'relative'
                    }}>
                    <div style={{
                        position: "absolute",
                        top: 0,
                        left: 20
                    }}>
                        <Popover placement="bottom" title={"今日天气"} content={content}>
                            <Button type={"default"} icon={<CloudOutlined/>}>天气</Button>
                        </Popover>
                    </div>
                    <div style={{
                        width: '500px',
                        marginRight: '8px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-evenly'
                    }}>
                        <div style={{marginRight: '20px'}}>
                            <Popover placement="bottom" title={"系统管理员"} content={avatar ? avatar.username : ''}>
                                < Avatar size={50}
                                         src={avatar ? `http://127.0.0.1:3031${avatar.imgPath}` : ''}></Avatar>
                            </Popover>

                            <i style={{marginLeft: '10px'}}>Hello，欢迎来到小米商城管理系统</i>
                        </div>
                        <div>
                            <Popover placement="bottom"
                                     title={<div style={{
                                         display: 'flex',
                                         justifyContent: 'space-between',
                                         alignItems: 'center',
                                         fontSize: '12px'
                                     }}>
                                         < p> 消息列表 < /p>
                                         <a href={'/system/message'} style={{fontWeight: 200}}>查看更多</a>
                                     </div>} content={messageItems}>
                                <Badge count={messageList.length}>
                                    <Button type={"default"} icon={<BellOutlined/>}></Button>
                                </Badge>
                            </Popover>
                        </div>
                        <Popconfirm
                            title="安全退出"
                            description="你确定要退出系统吗？"
                            onConfirm={confirm}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button type={"primary"}>安全退出</Button>
                        </Popconfirm>
                    </div>
                </Header>
                <Content>
                    {/*二级路由的出口*/}
                    <div style={{
                        width: '100%',
                        height: '100%',
                        boxSizing: 'border-box',
                        overflowY: "hidden",
                        padding: '5px',
                        background: '#f0f2f5',
                    }}>
                        <Outlet/>
                    </div>
                </Content>
            </Layout>
        </Layout>
    );
}
;
export default Home;